<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo" />

<div class="normal-table-wrap">
  <app-water-mark />
  <nz-card class="m-b-10" nzHoverable [nzBodyStyle]="{ 'padding-bottom': 0 }">
    <form nz-form>
      <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24 }">
        <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
          <nz-form-item>
            <nz-form-label [nzFor]="">菜单名称</nz-form-label>
            <nz-form-control>
              <input name="menuName" nz-input placeholder="请输入菜单名称" [(ngModel)]="searchParam.menuName" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
          <nz-form-item>
            <nz-form-label [nzFor]="">状态</nz-form-label>
            <nz-form-control>
              <nz-select name="visible" nzAllowClear nzPlaceHolder="下拉选择" [(ngModel)]="searchParam.visible">
                @for (item of visibleOptions; track item) {
                  <nz-option [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
                }
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div class="text-right p-0 m-b-10" nz-col [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
          <button nz-button [nzType]="'primary'" (click)="getDataList()">
            <i nz-icon nzType="search"></i>
            搜索
          </button>
          <button class="m-l-15" nz-button (click)="resetForm()">
            <i nz-icon nzTheme="outline" nzType="close-circle"></i>
            重置
          </button>
        </div>
      </div>
    </form>
  </nz-card>

  <app-card-table-wrap [btnTpl]="tableBtns" [tableTitle]="'菜单列表'" (reload)="reloadTable()">
    <app-tree-table [tableConfig]="tableConfig" [tableData]="dataList" (changePageIndex)="getDataList()" (changePageSize)="changePageSize($event)"></app-tree-table>
    <ng-template #operationTpl let-fatherId="fatherId" let-id="id" let-menuType="menuType">
      <span *appAuth="ActionCode.MenuEdit" class="operate-text" (click)="edit(id, fatherId)">编辑</span>
      <ng-container *appAuth="ActionCode.MenuAddLowLevel">
        @if (menuType === 'C') {
          <span class="operate-text" (click)="add(id)">添加下级</span>
        }
      </ng-container>
      <span *appAuth="ActionCode.MenuDel" class="operate-text" (click)="del(id)">删除</span>
    </ng-template>
  </app-card-table-wrap>
</div>
<ng-template #zorroIconTpl let-icon="icon">
  <div class="center">
    <i nz-icon nzTheme="outline" [nzType]="icon"></i>
  </div>
</ng-template>
<ng-template #aliIconTpl let-alIcon="alIcon">
  <div class="center">
    @if (alIcon) {
      <i nz-icon [nzIconfont]="alIcon"></i>
    }
  </div>
</ng-template>
<ng-template #tableBtns>
  <button class="m-r-8" nz-button nzType="primary" (click)="add(0)">
    <i nz-icon nzType="plus"></i>
    新建
  </button>
</ng-template>
<ng-template #visibleTpl let-menuType="menuType" let-visible="visible">
  @if (menuType === 'C') {
    <ng-container *ngTemplateOutlet="visible ? yesTpl : notTpl"></ng-container>
  }
</ng-template>
<ng-template #newLinkFlag let-menuType="menuType" let-newLinkFlag="newLinkFlag">
  @if (menuType === 'C') {
    <ng-container *ngTemplateOutlet="newLinkFlag ? yesTpl : notTpl"></ng-container>
  }
</ng-template>
<ng-template #yesTpl>
  <nz-tag [nzColor]="'green'">是</nz-tag>
</ng-template>
<ng-template #notTpl>
  <nz-tag [nzColor]="'magenta'">否</nz-tag>
</ng-template>
